<body>
    <h1>Consultar vehiculo </h1>
    <br /><br />
    <div id="mytabs">
        <ul id="tablist">
            <li id="tabs-1-tab"><a href="#tabs-1">Placa Vehiculo</a></li>
            <li id="tabs-2-tab"><a href="#tabs-2" onClick="consultar('list')">Historico</a></li>
        </ul>
        <div id="tabs-1">
            <table align="center">
                <tr>
                    <td>
                        Placa Vehiculo
                    </td>
                    <td>
                        <input name="placa_vehiculo" id="placa_vehiculo"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="info" > 
                            <br/>
                            placa_vehiculo: <br/>
                            marca:  <br/>
                            clase:  <br/>
                            tipo:  <br/>
                            anio:  <br/>
                            modelo:  <br/>
                            color:  <br/>
                            serial_carroceria:  <br/>
                            serial_motor:  <br/>
                            seguro:  <br/>
                            poliza:  <br/>
                            fecha_vencimiento_poliza:  <br/>
                            cedula_dueno:  <br/>
                            id_empresa:  <br/>
                            <br/><br/><br/>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>
                        <p>
                            <span class="art-button-wrapper">
                                <span class="art-button-l"> </span>
                                <span class="art-button-r"> </span>
                                <a class="art-button" style="cursor: pointer;" href="javascript:consultar('get')">Consultar</a>
                            </span>
                        </p>
                    </td>
                </tr>

            </table>
            <div id="respuesta"></div> 

        </div>

        <div id="tabs-2">
            <div id="infoTodos" >
                
            </div>
        </div>
    </div>
    <script>
        
        function consultar(tipoConsulta){			
            console.log(">>>" + $("#placa_vehiculo").get(0).value);
            //Con jquery obtengo los id de cada input que estan en mi pagina html.
            if (tipoConsulta == "get") {
                var params = {placa_vehiculo: $("#placa_vehiculo").get(0).value, accion:'consultar'}
            } else if(tipoConsulta == "list"){
                var params = {placa_vehiculo: '', accion:'consultar'}
            }
            $.ajax({
                data: params,
                type: "POST",
                dataType: "json",
                url: "../controladores/VehiculoControlador.php",
                success: function(data){                    
                    console.log(data);
                    if (tipoConsulta == "get") {
                        info(data); 
                    } else if(tipoConsulta == "list"){
                        infoTodos(data);
                    }   
                },
                statusCode: {
                    404: function() {
                        
                        console("page not found");
                    }
                },
                complete: function(objeto, exito){
                    console.log("objeto: " + objeto)
                    console.log("exito:" + exito)
                   
                }   
            });
           
           
        }
        function info(data) {
            $("#info").html('');
            $.each(data,function(index,item) {
                $("#info").append("<br/>");
                $("#info").append("placa_vehiculo: "+item.placa_vehiculo+"<br/>");
                $("#info").append("marca: "+item.marca+"<br/>");
                $("#info").append("clase: "+item.clase+"<br/>");
                $("#info").append("tipo: "+item.tipo+"<br/>");
                $("#info").append("anio: "+item.anio+"<br/>");
                $("#info").append("modelo: "+item.modelo+"<br/>");
                $("#info").append("color: "+item.color+"<br/>");
                $("#info").append("serial_carroceria: "+item.serial_carroceria+"<br/>");
                $("#info").append("serial_motor: "+item.serial_motor+"<br/>");
                $("#info").append("seguro: "+item.seguro+"<br/>");
                $("#info").append("poliza: "+item.poliza+"<br/>");
                $("#info").append("fecha_vencimiento_poliza: "+item.fecha_vencimiento_poliza+"<br/>");
                $("#info").append("cedula_dueno: "+item.cedula_dueno+"<br/>");
                $("#info").append("id_empresa: "+item.id_empresa+"<br/>");
                $("#info").append("<br/><br/><br/>");
            });
        }        
         function infoTodos(data) {
            $("#infoTodos").html('');
            $("#infoTodos").append("<br/>");
            var tabla="";
            tabla = "<table border='2'>";
            tabla += "<tr><td>Placa</td><td>Marca</td><td>Clase</td><td>Tipo</td><td>Año</td><td>Modelo</td><td>Color</td><td>S carroceria</td><td>S Motor</td><td>Seguro</td><td>poliza</td><td>Vencimiento Poliza</td><td>CI Dueño</td></tr>";
            $.each(data,function(index,item) {
                tabla += "<tr>";
                tabla += "<td>" + item.placa_vehiculo + "</td>";
                tabla += "<td>" + item.marca + "</td>";
                tabla += "<td>" + item.clase + "</td>";
                tabla += "<td>" + item.tipo + "</td>";
                tabla += "<td>" + item.anio + "</td>";
                tabla += "<td>" + item.modelo + "</td>";
                tabla += "<td>" + item.color + "</td>";
                tabla += "<td>" + item.serial_carroceria + "</td>";
                tabla += "<td>" + item.serial_motor + "</td>";
                tabla += "<td>" + item.seguro + "</td>";
                tabla += "<td>" + item.poliza + "</td>";
                tabla += "<td>" + item.fecha_vencimiento_poliza + "</td>";
                tabla += "<td>" + item.cedula_dueno + "</td>";
                
                tabla += "</tr>";
            });
            tabla += "</table>";
            $("#infoTodos").append(tabla);
        }
        //Este codigo define el tab en el formulario
        $("#mytabs" ).tabs();
    </script>  
</body>
